<template>
    <div id="getDataByTable">
        <el-tabs style="width: 100%" type ='border-card' v-model="activeName" @tab-click="handleClick">
            <el-tab-pane  label="数据导入--导入表" name="first">
                <el-container>
                    <el-aside style="width: 150px;border: 1px solid #f5f7fa;">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            :model="formData"
                            :row-style="{height: '35px',border: 'none'}"
                            :cell-style="{padding: '0'}"
                            tooltip-effect="dark"
                            highlight-current-row
                            height="600px"
                            @current-change="selectChange"
                            :show-header="false"
                        >
                            <el-table-column  prop="name" >
                            </el-table-column>
                        </el-table>
                    </el-aside>
                    <el-main style="margin-top: -10px">
                    <el-container  style="height: 600px;margin-top: -42px">
                        <el-header style="height: 50px;margin-top: 23px;border: 1px solid #f5f7fa;">
                            <el-input style="width: 200px;margin-left: 550px" v-model="tableName" placeholder="请输入内容"></el-input>
                            <el-button
                                style="margin-left: -5px;background-color: #f04959"
                                @click="searchHandler(tableName)">
                                <i class="el-icon-search" style="color: white"></i>
                            </el-button>
                            <el-button @click="submitData"
                                       style="background-color:#f04959;margin-top: 2px;margin-left: 17px;color: white;"
                            >确认</el-button>
                        </el-header>
                        <el-main style="border: 1px solid #f5f7fa;">
                            <dataBaseTablesInfo style="margin-top: -21px" ref="getTablesList" :tableData1="tableData1"></dataBaseTablesInfo>
                        </el-main>
                    </el-container>
                </el-main>
                </el-container>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import dataBaseTablesInfo from './DataBaseTablesInfo'
    import {
        QUERY_DBLINK,
        CUST_TABLE_MAINTAIN,
        QUERY_FONT_NODE,
        QUERY_DBLINK_ALL_TABLE
    } from '@api/url'
    import addMenuEvents from '@/components/group/addEvent.js' // 新增菜单
    export default {
        name: 'GetDataByTable',
        data () {
            return {
                tableData1: [],
                tableData: [],
                formData: [],
                input: '',
                activeName: 'first',
                dataTmp: '',
                pageInfo: {
                    pageNo: 1,
                    pageSize: 5,
                    total: 0
                },
                tableName: ''
            }
        },
        components: {
            dataBaseTablesInfo
        },
        methods: {
            async submitData () {
                debugger
                // 根据条件获取到改数据库表的所有字段
                let conData = {
                    modelId: this.$refs.getTablesList.currentRow.TABLE_NAME,
                    idType: '2',
                    connId: this.dataTmp.connId,
                    pageNo: '1',
                    pageSize: '15'
                }
                 // 获取到所有字段
                let allCol = []
               await addMenuEvents.addEvent(this)
               await ajax.post(QUERY_FONT_NODE, conData).then(res => {
                    debugger
                   allCol = res.data
                    debugger
                    let conditions = {
                        optMode: 'A',
                        modelId: this.$storeSave.state.addelevanceObj.menuId,
                        tableId: this.$storeSave.state.addelevanceObj.menuId,
                       modelName: this.$storeSave.state.addelevanceObj.name,
                        modelType: '3',
                        connId: this.dataTmp.connId,
                        pcWhere: '',
                        pcGrp: '',
                        pcOrder: '',
                        flag: '0',
                        createdBy: 'lzy',
                        createdDt: '20210118',
                        updatedBy: 'lzy',
                        updatedDt: '20200118',
                        tableData1: [],
                        tdfrs: [{
                            tableId: this.$storeSave.state.addelevanceObj.menuId,
                            connId: this.dataTmp.connId,
                            tableName: this.$refs.getTablesList.currentRow.TABLE_NAME,
                            alias: this.$refs.getTablesList.currentRow.TABLE_NAME,
                            tableCnname: this.$refs.getTablesList.currentRow.TABLE_NAME,
                            tableShowname: this.$storeSave.state.addelevanceObj.name,
                            srcType: '1',
                            srcLayer: '1',
                            srcSubject: '1',
                            srcTable: this.$refs.getTablesList.currentRow.TABLE_NAME,
                            tdfds: []
                        }]
                    }
                    for (var i in allCol) {
                        if (allCol[i].COMMENTS == '') {
                            allCol[i].COMMENTS = '未知'
                        }
                        let col = {
                            tableId: this.$storeSave.state.addelevanceObj.menuId,
                            tableName: this.$refs.getTablesList.currentRow.TABLE_NAME,
                            fldEnname: allCol[i].COLUMN_NAME,
                            fldShowname: allCol[i].COMMENTS,
                            fldAlias: allCol[i].COLUMN_NAME,
                            fldCnname: allCol[i].COMMENTS,
                            fldType: allCol[i].DATA_TYPE,
                            fldLen: allCol[i].DATA_LENGTH,
                            seqno: allCol[i].COLUNM_ID
                        }
                        conditions.tdfrs[0]['tdfds'].push(col)
                    }
                    debugger
                    ajax.post(CUST_TABLE_MAINTAIN, conditions).then(res => {
                        this.Col = res.dada.data
                    }).catch(err => {
                        console.error('加载出错！', err)
                    })
                    debugger
                    // allCol = res.data.data.page
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                    // 关闭新增窗口
                    this.cancel()
                })
            },
            queryDatabaseCon () {
                var conditons = {
                    pageNo: 1,
                    pageSize: 15,
                    connId: this.dataTmp.connId
                }
                ajax.post(QUERY_DBLINK, conditons).then(res => {
                    console.info(res)
                    this.tableData = res.data.records
                    this.pageInfo.total = res.data.recordNumber
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                    this.isShowLoading = false
                    // this.getTableList()
                })
            },
            deleteRow (index, rows) {
                rows.splice(index, 1)
            },
            selectChange (row) {
                // 临时存储之前获取到的行信息
                this.dataTmp = row
                this.searchKey = ''
                debugger
                this.$refs.getTablesList.queryByCondition(row)
            },
            // 页记录数更改
            handleSizeChange (pageSize) {
                this.pageInfo.pageNo = 1 // 重置到第一页
                this.pageInfo.pageSize = pageSize
                this.queryDatabaseCon()
            },
            // 当前页切换
            handleCurrentChange (pageNo) {
                this.pageInfo.pageNo = pageNo
                this.queryDatabaseCon()
            },
            // 取消操作
            cancel () {
                this.$emit('showSelfData')
            },
            searchHandler () {
                debugger
                var content = {
                    pageNo: 1,
                    pageSize: 15,
                    tableName: this.tableName,
                    connId: this.dataTmp.connId
                }
                this.$refs.getTablesList.handleCurrentRowChange(1, content)
                // this.search['pageSize'] = this.currentPageSize;
                // this.search['pageNo'] = this.currentRow;
            // ajax.post(QUERY_DBLINK_ALL_TABLE, content).then(res => {
            //     this.tableData1 = res.data.records
            //     this.tableData1.recordNumber = res.data.recordNumber
            //     // this.$emit('handleCurrentRowChange')
            // }).catch(err => {
            //     console.error('错误！', err)
            // }).finally(() => {
            //     this.isShowLoading = false
            // })
                // 在这里临时筛选一下,然后等查询接口优化之后即可继续往下走
                // this.$refs.getTablesList.searchTableList(searchKey);
            }
        },
        created () {
            this.queryDatabaseCon()
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
#getDataByTable
    height: 700px
    display: flex;
    text-align: center;
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    .el-table__body tr.current-row>td {
        background-color: rgba(90, 154, 160, 0.15) !important;
        color: #f04959;/* 设置文字颜色，可以选择不设置 */
    }
</style>
